<template>
	<!-- 视频单项 -->
	<view class="video-layout">
		<video v-show="isplay" :id="`myVideo${index}`"
			:style="{'height':height,'width':'100%','borderRadius':`${borderRadius}rpx`}" :src="src" controls
			objectFit="contain" :enable-progress-gesture="false" :initial-time="initialTime" x5-video-player-type="h5"
			x-webkit-airplay="allow" webkit-playsinline="true" @error="videoErrorCallback" @timeupdate="timeupdate"
			@play="play" @pause="pause" :show-fullscreen-btn="false">
			<!-- #ifdef APP-PLUS -->
			<cover-view :style="{ transform: 'translateX(' + moveX + 'px)'}" />
			<!-- #endif -->
			<!-- 不使用弹窗提示，视频内部提示可使用cover-view自定义播放提示样式 -->
		</video>
		<view v-show="!isplay" class="image"
			:style="{'height':height,'width':'100%','borderRadius':`${borderRadius}rpx`}" @click="beforePlay">
			<image :src="poster" mode=""></image>
			<view class="play" />
		</view>
	</view>
</template>
<script>
	// enable-progress-gesture 手势滑动在非app页面开启后，视频轮播会存在与轮播图，滑动事件同时触发的情况
	export default {
		props: {
			moveX: {
				type: [Number, String],
				default: 0
			}, // 轮播图兼容滑动兼容-单独使用可不传
			index: {
				type: [Number, String],
				default: 0
			}, // 下标索引
			height: {
				type: String,
				default: '420rpx'
			}, // 视频高度
			borderRadius: {
				type: Number,
				default: 0
			}, // 圆角值，单位rpx
			initialTime: {
				type: Number,
				default: 0
			}, // 指定视频初始播放位置，单位为秒（s）
			videoSize: {
				type: [Number, String],
				default: 10
			}, // 视频大小
			ignoreTip: {
				type: Boolean,
				default: true
			}, // 播放环境提示
			// #ifdef APP-PLUS 
			enableProgressGesture: {
				type: Boolean,
				default: true
			}, // 手势滑动
			// #endif
			// #ifndef APP-PLUS
			enableProgressGesture: {
				type: Boolean,
				default: false
			}, // 手势滑动
			// #endif
			src: { // 播放地址
				type: String,
				default: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4'
			},
			poster: { // 封面
				type: String,
				default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
			}
		},
		data() {
			return {
				//   videoContext: null, // 视频实例
				isplay: false, // 播放状态
				isTip: true // 是否提示
			}
		},
		watch: {
			ignoreTip: {
				handler(v) {
					this.isTip = v
				},
				immediate: true
			}
		},
		onReady() {
			// this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			timeupdate(e) { // 播放进度变化时触发--更新播放缓存
				this.$emit('timeupdate', e)
			},
			videoErrorCallback: function(e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			play() {

			},
			pause() {
				console.log('暂停')
				this.isplay = false
			},
			startPlay() { // 开始播放
				this.isplay = true
				this.$nextTick(() => {
					const id = `myVideo${this.index}`
					const video = uni.createVideoContext(id)
					video.play()
				})
			},
			pausePlay() { //暂停播放 
				const id = `myVideo${this.index}`
				const video = uni.createVideoContext(id)
				video.pause()
				this.isplay = false
			},
			beforePlay() { // 播放前拦截
				this.isplay = true // 拦截前显示播放视频
				if (!this.isTip) return this.startPlay() // 不提示直接播放
				// https://uniapp.dcloud.io/api/system/network?id=getnetworktype
				uni.getNetworkType({
					success: (res) => {
						const networkType = res.networkType
						if (networkType === 'wifi' || networkType === 'ethernet') {
							this.startPlay()
						} else {
							uni.showModal({
								title: '提示',
								content: `当前为移动网络，播放视频需消耗${this.videoSize}M流量，是否继续播放？`,
								success: (res) => {
									if (res.confirm) {
										this.startPlay()
										this.isTip = false
									} else {
										this.isplay = false
									}
								}
							})
						}
					}
				})
			}

		}
	}
</script>
<style lang="scss" scoped>
	.video-layout {
		display: flex;
		align-items: center;

		// video{
		//     width: 100%;
		//     height: 100%;
		//     /deep/.uni-video-container{
		//         width: auto;
		//         height: auto;
		//     }
		// }
		.image {
			position: relative;
			width: 100%;
			height: 100%;

			/deep/ uni-image {
				width: 100%;
				height: 100%;
			}

			.play {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 80rpx;
				height: 80rpx;
				transform: translate(-50%, -50%);
				background-image: url('@/static/img/play.png');
				background-size: contain;
				background-repeat: no-repeat;
				background-color: rgba($color: #000000, $alpha: 0.1);
				border-radius: 50%;
			}
		}
	}
</style>